<!--
 * @Author: wang cong wangc9832@163.com
 * @Date: 2023-09-22 11:14:19
 * @LastEditors: wang cong wangc9832@163.com
 * @LastEditTime: 2023-12-22 17:12:45
 * @FilePath: /ams_kt_front/src/components/Form/src/busComponents/CustomerSelect.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div style="display: flex; height: 32px; justify-content: space-between">
    <a-input
      style="height: 32px; color: rgba(0, 0, 0, 0.88)"
      placeholder="请添加客户信息"
      v-model:value="name"
      disabled
    />
    <p class="customerBox" v-if="props.isEdit">
      <Customer
        @submit="changeCustomer"
        :customerId="props.customerId"
        :disable="route.query.actmCustomerId ? true : false"
      />|<span @click="handleAdd" style="width: 100%; white-space: nowrap"
        >创建</span
      >
    </p>
  </div>
  <!-- 修改客户 -->
  <EditDrawer ref="modal" @register="registerDrawerCustomer" />
</template>
<script setup>
import { ref, unref, computed, watch, onMounted } from 'vue';
import { BasicDrawer, useDrawerInner, useDrawer } from '@/components/Drawer';
import Customer from '@/views/customer/amsConfirmation/components/Customer.vue';
import EditDrawer from '@/views/customer/amsCustomer/EditDrawer.vue';
import { detail as customerDetail } from '@/api/customer/amsCustomerManage';
import { useRoute } from 'vue-router';
const emit = defineEmits(['submit', 'update:value']);
const route = useRoute();
const props = defineProps({
  value: {
    type: String,
  },
  customerId: {
    type: String || Number,
  },
  isEdit: {
    type: Boolean,
    default: true,
  },
});
const name = ref();
const [registerDrawerCustomer, { openDrawer }] = useDrawer();
function handleAdd() {
  openDrawer(true, {
    isUpdate: false,
    isEdit: true,
  });
}
const changeCustomer = (id) => {
  customerDetail(id).then((res) => {
    emit('update:value', res.acName);
    emit('change', res.acName);
    emit('submit', res);
  });
};
watch(
  () => props.value,
  (v) => {
    name.value = v;
  },
);
</script>
<style lang="less" scoped>
.customerBox {
  height: 32px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: rgb(9, 96, 189);
  cursor: pointer;
}
</style>
